<template>
  <div class="custom-play">
    <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeInUp"
      leave-active-class="animated fadeOutDown"
    >
      <PlayBar v-if="showPlayBar"/>
    </transition>

    <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeInUp"
      leave-active-class="animated fadeOutDown"
    >
      <PlayPage
        v-if="!showPlayBar"
        @update:currentTime="$emit('update:currentTime', $event)"
      />
    </transition>

    <transition
      name="custom-classes-transition"
      enter-active-class="animated fadeInUp"
      leave-active-class="animated fadeOutDown"
    >
      <!-- v-if组件会销毁，因为我要重置歌曲选中状态 -->
      <MyplayList v-if="showMyPlayList" />
    </transition>
  </div>
</template>

<script>
import PlayBar from "../playviews/PlayBar.vue";
import PlayPage from "../playviews/PlayPage.vue";
import MyplayList from "./MyplayList.vue";
export default {
  name: "CustomPlay",
  components: {
    PlayBar,
    PlayPage,
    MyplayList,
  },
  data() {
    return {
      showMyPlayList: false,

      showPlayBar: true,
    };
  },
};
</script>

<style lang="less" scoped></style>
